<template>
	<view class="">
		<NavBar :title="orderDetail.orderStatus" :isShowLeftBtn="true">
		</NavBar>
	</view>
	<view class="content" :style="{minHeight:contentHeight}" v-if="isPageShow">
		<view class="main">
			<view class="main_sec m_b_90">
				<view class="m_b_42" style="text-align: center;">
					<text class="f_30_0_b">
						{{orderDetail.orderStatus}}
					</text>
				</view>
				<view class="m_b_12">
					<view class="" style="width: 620rpx;">
						<text class="f_26_0 u-line-1">
							订单编号：{{orderDetail.order_no}}
						</text>
					</view>
					<view class="" style="width: 620rpx;">
						<text class="f_26_0">
							送货地址：{{orderDetail.delivery_address}}
						</text>
					</view>
					<view class="" style="width: 620rpx;">
						<text class="f_26_0 u-line-1">
							收货联系人：{{orderDetail.contact_name}}
						</text>
					</view>
					<view class="" style="width: 620rpx;">
						<text class="f_26_0 u-line-1">
							联系电话：{{orderDetail.contact_phone}}
						</text>
					</view>
				</view>
				<view class="sec_detail m_b_20">
					<view class="flex_both">
						<view class="" style="width: 250rpx;">
							<text class="f_26_0 u-line-1">
								采购总价：{{orderDetail.caigou_price}}
							</text>
						</view>
						<view class="" style="width: 350rpx;" @click="onClickCgMx">
							<text class="f_26_0 u-line-1">
								采购订单明细：(点击查看明细)
							</text>
						</view>
					</view>
					<view class="" v-if="cgShow">
						<view class="m_t_10 m_b_10">
							<text class="f_26_0" style="font-weight: bold;font-size: 25rpx;">
								采购订单明细：
							</text>
						</view>
						<view class="m_b_20 flex_both" v-for="(item,index) in orderDetail.goods" :key="index"
							style="align-items: flex-start;">
							<view style="width: 500rpx;">
								<view class="flex_both">
									<view class="" style="width: 250rpx; flex-shrink: 0;">
										<text class="f_26_0 u-line-1">
											名称：{{item.name}}
										</text>
									</view>
									<view class="" style="width: 250rpx; flex-shrink: 0;">
										<text class="f_26_0">
											型号：{{item.model}}
										</text>
									</view>
								</view>
								<view class="flex_both">
									<view class="" style="width: 250rpx; flex-shrink: 0;">
										<text class="f_26_0 u-line-1">
											单价：{{item.price_ask}}
										</text>
									</view>
									<view class="" style="width: 250rpx; flex-shrink: 0;">
										<text class="f_26_0 u-line-1">
											数量：{{item.num}}
										</text>
									</view>
								</view>
								<view class="" style="width: 480rpx;">
									<text class="f_26_0 ">
										技术参数：{{item.desc}}
									</text>
								</view>
								<view class="" style="width: 480rpx;">
									<text class="f_26_0  ">
										总价：{{ parseInt(item.price_ask)*parseFloat(item.num)}}
									</text>
								</view>
							</view>
							<view>
								<view class="m_r_10" style="width: 200rpx; flex-shrink: 0;">
									<up-image :show-loading="true" :src="item.images" width="120rpx" height="120rpx"
										radius="5" @click="previewImage(item.images,index)"></up-image>
								</view>
								<!-- 				<view class="m_b_10 m_r_10" v-for="(ima,index) in item.images"
									:key="index">
									<up-image :src=" item.images" width="190rpx" height="174rpx" radius="5"
										@click="previewImage(item.images,index)"></up-image>
								</view> -->
							</view>
						</view>
					</view>
					<!-- <view class="flex_both">
						<view class="" style="width: 250rpx;">
							<text class="f_26_0 u-line-1">
								订单毛利：{{orderDetail.maoli}}
							</text>
						</view>
						<view class="" style="width: 350rpx;">
							<text class="f_26_0 u-line-1">
								业务费用：{{orderDetail.yewu_fee}}
							</text>
						</view>
					</view> -->
				</view>
				<view class="m_b_32">
					<!-- 			<view class="" style="width: 620rpx;">
						<text class="f_26_0 u-line-1">
							订单总价：{{orderDetail.caigou_price}}
						</text>
					</view> -->
					<view class="" style="width: 620rpx;">
						<text class="f_26_0 u-line-1">
							询价总额：{{orderDetail.caigou_price}}
						</text>
					</view>
					<!-- <view class="" style="width: 620rpx;">
						<text class="f_26_0">
							收款单位名称：XXXXXXXX
						</text>
					</view>
					<view class="" style="width: 620rpx;">
						<text class="f_26_0 u-line-1">
							收款账户：1423658769780
						</text>
					</view> -->
				</view>
				<view class="form_box m_b_48">
					<view class="flex m_b_22">
						<!-- <view class="upload_box m_r_42" v-if="orderDetail.order_status == 5">
							<up-upload :fileList="imgForm.fileList1" @afterRead="afterRead" @delete="deletePic"
								:name="1" multiple :maxCount="1" width="190rpx" height="190rpx">
								<view class="upload_box">
									<view class="">
										<up-icon name="/static/images/salesman/upload_icon.png" color="#4E4E4E"
											size="40"></up-icon>
									</view>
									<view class="">
										<text class="f_30_9" style="color: #B0B0B1;">
											采购合同
										</text>
									</view>
								</view>
							</up-upload>
						</view> -->
						<view class="flex m_t_20" style="align-items: flex-start;">
							<view class="m_r_12">
								<text class="f_26_0">
									采购合同：
								</text>
							</view>
							<view class="flex" style="flex-shrink: 0;width: 190rpx;height: 190rpx;">
								<view class="m_b_10 m_r_10" v-for="(item,index) in imgList.purchase_contract_images"
									:key="index">
									<up-image :src="item" width="160rpx" height="160rpx" radius="5"
										@click="previewImage(imgList.purchase_contract_images,index)"></up-image>
								</view>
							</view>
						</view>
						<view class="flex m_t_20" style="align-items: flex-start;">
							<view class="m_r_12">
								<text class="f_26_0">
									付款截图：
								</text>
							</view>
							<view class="flex" style="flex-shrink: 0;width: 190rpx;height: 190rpx;">
								<view class="m_b_10 m_r_10" v-for="(item,index) in imgList.finance_pay_images"
									:key="index">
									<up-image :src="item" width="160rpx" height="160rpx" radius="5"
										@click="previewImage(imgList.finance_pay_images,index)"></up-image>
								</view>
							</view>
						</view>

					</view>
					<view class="flex m_t_20" style="align-items: flex-start;">
						<view class="m_r_12">
							<text class="f_26_0">
								发票日志：
							</text>
						</view>
						<view class="upload_box">
							<up-upload :fileList="imgForm.fileList2" @afterRead="afterRead" @delete="deletePic"
								:name="2" multiple :maxCount="1" width="190rpx" height="190rpx">
								<view class="upload_box">
									<view class="">
										<up-icon name="/static/images/salesman/upload_icon.png" color="#4E4E4E"
											size="40"></up-icon>
									</view>
								</view>
							</up-upload>
						</view>
					</view>
					<view class="m_t_20" style="width: 300rpx; flex-shrink: 0;">
						<text class="f_26_0 u-line-1">
							收款单位：{{orderDetail.shoukuan_company}}
						</text>
					</view>
					<view class="m_b_22" style="width: 300rpx; flex-shrink: 0;">
						<text class="f_26_0">
							收款账号：{{orderDetail.shoukuan_account}}
						</text>
					</view>
					<view class="form_item form_input m_b_22">
						<up-input v-model="form.express_company" placeholder="请填写快递公司" border="none"
							fontSize="26rpx"></up-input>
					</view>
					<view class="form_item form_input">
						<up-input v-model="form.courier_number" placeholder="请填写快递单号" border="none"
							fontSize="26rpx"></up-input>
					</view>
				</view>

				<view class="hr m_t_20 m_b_14">

				</view>
				<view class="">
					<text class="f_28_0" style="color: #FD1122;">
						{{orderDetail.orderStatus}}
					</text>
				</view>
				<view class="">
					
					<text class="f_26_0" style="color: #8C8E91;">
						下单日期：{{orderDetail.create_time}}
					</text>
				</view>
			</view>
			<view class="submit_btn">
				<up-button throttleTime="1000" @click="onComplete">
					<text class="f_28_f">
						点击完成
					</text>
				</up-button>
			</view>
		</view>
	</view>
</template>
<script setup lang="ts">
	import { ref, reactive, getCurrentInstance } from "vue";
	import { onLoad, onShow } from "@dcloudio/uni-app";
	import NavBar from "@/components/navbar.vue"
	const { proxy } = getCurrentInstance()
	const contentHeight = ref('100vh')
	const statusBarHeight = ref(88)
	const oId = ref()
	const isPageShow = ref(false)
	onLoad((e) => {
		uni.getSystemInfo({
			success: function (info) {
				statusBarHeight.value = (info.statusBarHeight + 44) * 2
				contentHeight.value = `calc(100vh - ${statusBarHeight.value + 100}rpx)`
			}
		});
		oId.value = e.id
		form.value.order_id = e.id
		getOrderDetail()
	})
	const orderDetail = ref({ orderStatus: '' })
	const getOrderDetail = async () => {
		let res = await proxy.$http('salesMan.getOrderDetail', { order_id: oId.value })
		if (res.code == 1) {
			orderDetail.value = res.data
			if (res.data.purchase_contract_images) {
				imgList.value.purchase_contract_images = res.data.purchase_contract_images.split(',')
			}
			if (res.data.finance_pay_images) {
				imgList.value.finance_pay_images = res.data.finance_pay_images.split(',')
			}
			isPageShow.value = true
		}
	}
	const onComplete = () => {
		cgDeal3()
	}
	const imgForm = ref({
		fileList2: []
	})
	const imgList = ref({
		purchase_contract_images: [],
		finance_pay_images: []
	})
	const form = ref({
		order_id: '',
		courier_number: '',
		express_company: '',
		invoice_mark_images: '',
	})
	const deletePic = (event) => {
		let fileList = imgForm.value[`fileList${event.name}`]
		fileList.splice(event.index, 1);
	};
	// 新增图片
	const afterRead = async (event) => {
		let fileList = imgForm.value[`fileList${event.name}`]
		// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
		let lists = [].concat(event.file);
		let fileListLen = fileList.length;
		lists.map((item) => {
			fileList.push({
				...item,
				status: 'uploading',
				message: '上传中',
			});
		});
		for (let i = 0; i < lists.length; i++) {
			const result = await uploadFilePromise(lists[i].url);
			console.log(result);
			let item = fileList[fileListLen];
			fileList.splice(fileListLen, 1, {
				...item,
				status: 'success',
				message: '',
				url: result,
			});
			fileListLen++;
		}
	};
	const uploadFilePromise = (url) => {
		return new Promise((resolve, reject) => {
			let a = uni.uploadFile({
				url: proxy.$config.baseUrl + '/api/common/upload',
				filePath: url,
				name: 'file',
				formData: {
					user: 'test',
				},
				success: (res) => {
					setTimeout(() => {
						resolve(JSON.parse(res.data).data.fullurl);
					}, 1000);
				},
			});
		});
	};

	const cgDeal3 = async () => {
		let params = JSON.parse(JSON.stringify(form.value))


		if (imgForm.value.fileList2.length == 0 && orderDetail.value.order_status == 90) {
			uni.$u.toast('发票标志不能为空')
			return
		}
		if (!form.value.express_company && orderDetail.value.order_status == 90) {
			uni.$u.toast('快递公司不能为空')
			return
		}
		if (!form.value.courier_number && orderDetail.value.order_status == 90) {
			uni.$u.toast('快递单号不能为空')
			return
		}
		imgForm.value.fileList2.forEach((v, index) => {
			if (index == 0) {
				params.invoice_mark_images += v.url
			} else {
				params.invoice_mark_images += ',' + v.url
			}
		})
		uni.showLoading({
			title: "上传中"
		})
		let res = await proxy.$http('purchaser.cgDeal3', { ...params })
		uni.hideLoading()
		if (res.code == 1) {
			uni.$u.toast('提交成功')
			setTimeout(() => {
				uni.navigateBack()
			}, 800)
		}
	}
	const previewImage = (e, index) => {
		let urls = []
		if (typeof e == 'string') {
			urls = [e]
		} else {
			urls = [...e]
		}
		uni.previewImage({
			urls: urls, //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
			current: index, // 当前显示图片的http链接，默认是第一个
			success: function (res) { },
			fail: function (res) { },
			complete: function (res) { },
		})
	};
	// 销售明细展示
	const xsShow = ref(false)
	const onClickXsMx = () => {
		if (xsShow.value) {
			xsShow.value = false
		} else {
			xsShow.value = true
		}
	}
	// 采购明细展示
	const cgShow = ref(false)
	const onClickCgMx = () => {
		if (cgShow.value) {
			cgShow.value = false
		} else {
			cgShow.value = true
		}
	}
</script>
<style lang="scss" scoped>
	.content {
		background: #F2F2F2;
		padding: 32rpx 20rpx;
		padding-bottom: 64rpx;

		.main {
			.main_sec {
				width: 654rpx;
				padding: 28rpx;
				padding-top: 40rpx;
				background: #FFFFFF;
				box-shadow: 2rpx 6rpx 5rpx 0rpx rgba(197, 197, 197, 0.29);
				border-radius: 10rpx;
				border: 1px solid #EDEDEE;

				.sec_detail {
					width: 626rpx;
					padding: 20rpx;
					background: #F6F8FE;
					border-radius: 5rpx;
				}

				.form_box {
					.form_input {
						width: 604rpx;
						height: 80rpx;
						padding: 0 22rpx;
						background: #FFFFFF;
						box-shadow: 2rpx 6rpx 5rpx 0rpx rgba(197, 197, 197, 0.29);
						border-radius: 10rpx;
						border: 1px solid #EDEDEE;
						display: flex;
						align-items: center;
					}
				}
			}
		}

	}

	.upload_box {
		width: 192rpx;
		height: 175rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		border: 1px solid #E4E4E5;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
</style>